<template>
  <el-dialog
    title="新增分类"
    :visible.sync="isShowModel"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    class="classify"
    @close="$emit('update:isShowDetail', false)">
      <el-form ref="classifyInfo" :model="classifyInfo" label-width="140px" :rules="rules">
        <el-form-item label="按钮名称：" required prop="funName">
          <el-input v-model="classifyInfo.funName"></el-input>
        </el-form-item>
        <el-form-item label="所属权限code：" required prop="funCode">
          <el-input v-model="classifyInfo.funCode"></el-input>
        </el-form-item>
        <el-form-item label="功能地址：" prop="funUrl">
          <el-input v-model="classifyInfo.funUrl"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBtn">保存</el-button>
          <el-button @click="closeModel">取消</el-button>
        </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script>
    export default {
        name: "Classify",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          },
          dataInfo: {
            type: Array,
            default: []
          },
          menuId: {
            type: Number,
            default: null
          },
          gcode: {
            type: Array,
            default: []
          }
        },
        data() {
          return {
            classifyInfo: {
              funCode: null,
              funName: '',
              funUrl: ''
            },
            isShowModel: this.isShowDetail,
            rules: {
              funName: [
                {
                  required: true,
                  message: '请输入按钮名称',
                  trigger: ['blur', 'change'],
                },
              ],
              funCode: [
                { required: true, message: '请输入所属权限code', trigger: ['blur', 'change'] },
                { validator: validate.invalidSymbolNOTEnglish, trigger: ['change', 'blur'] }
              ]
            }
          }
        },
        methods: {
          beforeClose(done) {
            this.resetForm('classifyInfo')
            done()
          },
          closeModel() {
            this.resetForm('classifyInfo')
            this.$emit('update:isShowDetail', false)
          },
          saveBtn() {
            let _this = this;
            this.$refs['classifyInfo'].validate((valid) => {
              if(valid) {
                // 从dataInfo中查找有没有重复的数据
                 let data = {};
                 let isLife = this.dataInfo.length > 0 ? this.dataInfo.find((val, index, arr) => {
                   return val.funName == this.classifyInfo.funName || val.funCode == this.classifyInfo.funCode.toUpperCase()
                 }) : false;

                data = {
                  funCode: this.classifyInfo.funCode ? this.classifyInfo.funCode.toUpperCase() : '',
                  funName: this.classifyInfo.funName,
                  funUrl: this.classifyInfo.funUrl,
                  id: null,
                  gcode: this.gcode ? this.gcode[0] : '',
                  menuId: this.menuId
                };

                // 查询按钮权限
                // ajax.post(apis.permission.queryBtn, data).then(res => {
                //     console.log(res)
                // });

                if(isLife) {
                  this.$message({
                    message: "按钮名称或按钮code重复，请检查清楚",
                    type: 'warning'
                  })
                } else {
                  this.$emit('addTag', data);
                  this.closeModel()
                }

              }
            })
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val
          }
        }
    }
</script>

<style lang="scss">
.classify {
  z-index: 100000!important;
  .el-dialog {
    width: 460px;
  }
}
</style>
